<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-model="keyword" @keydown.down="down" @keydown.up.prevent="up" @keydown.enter="enter">
        <ul>
            <li v-for="(item, index) in arr" :class="index === n? 'pink': ''">{{ item.q }}</li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>


        let vm = new Vue({
            el: '#app',
            data: {
                keyword: '',
                arr: [],
                n: -1
            },
            watch: {
                keyword() {
                    let os = document.createElement('script')
                    if (this.keyword.trim() === '') {
                        return
                    }
                    os.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&wd=' + this.keyword + '&req=2&csor=1&cb=fn'
                    document.body.appendChild(os)
                }
            },
            methods: {
                down() {
                    this.n++
                    if(this.n >= this.arr.length) {
                        this.n = 0
                    }
                },
                up() {
                    this.n--;
                    if(this.n < 0) {
                        this.n = this.arr.length - 1
                    }
                },
                enter() {
                    window.open('https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=02003390_25_hao_pg&wd='+this.arr[this.n].q)
                }
            }
        })



        function fn(d) {
           vm.arr = d.g
           console.log(vm.arr);
        }
    </script>
</body>

</html>
